<template>
  <div class="app-container">
    <head-tool>
      <template #right>
        <el-button @click="doAdd(1, '0')" type="primary">添加权限</el-button>
      </template>
    </head-tool>

    <el-card>
      <el-table
        default-expand-all
        row-key="id"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="code" label="标识" width="180">
        </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-link
              v-if="row.pid === '0'"
              @click="doAdd(2, row.id)"
              type="primary"
              >添加</el-link
            >
            <el-link
              @click="doEdit(row.id)"
              style="margin: 0 20px"
              type="primary"
              >编辑</el-link
            >
            <el-link @click="doDel(row.id)" type="primary">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增对话框 -->
      <el-dialog @close="close" title="新建权限" :visible.sync="showAddDialog">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item prop="name" label="权限名称" label-width="90px">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item prop="code" label="权限标识" label-width="90px">
            <el-input v-model="form.code" />
          </el-form-item>
          <el-form-item prop="description" label="权限描述" label-width="90px">
            <el-input v-model="form.description" />
          </el-form-item>
          <el-form-item label="开启" label-width="90px">
            <el-switch
              v-model="form.enVisible"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import {
  getPermissionList,
  addPermission,
  getPermissionDetail,
  updatePermission,
  removePermission
} from '@/api/permission'
// 导入递归函数
import { arrayToTree } from '@/utils'
export default {
  name: 'permission',
  data() {
    return {
      tableData: [],
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        type: '',
        pid: ''
      },
      showAddDialog: false,
      rules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入权限描述', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    this.loadData()
  },

  methods: {
    // 删除点击事件
    doDel(id) {
      this.$confirm(this.$t('global.isDel'))
        .then(async() => {
          const res = await removePermission(id)
          this.$message.success(res.message)
          this.loadData()
        })
        .catch(() => {})
    },
    // 点击编辑触发的事件
    async doEdit(id) {
      // 发请求获取数据
      const res = await getPermissionDetail(id)
      // 把数据赋值给form
      this.form = res.data
      // 显示出对话框
      this.showAddDialog = true
    },
    close() {
      this.form = {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        type: '',
        pid: ''
      }

      this.$refs.form.resetFields()
      this.showAddDialog = false
    },
    // 点击添加权限
    doAdd(type, pid) {
      // 把type和pid存起来
      this.form.type = type
      this.form.pid = pid
      // 显示出对话框
      this.showAddDialog = true
    },
    // 保存的点击事件
    save() {
      // 整个表单验证
      this.$refs.form.validate(async(v) => {
        if (v) {
          let res = null
          if (this.form.id) {
            // 修改
            res = await updatePermission(this.form)
          } else {
            // 发请求
            res = await addPermission(this.form)
          }
          this.$message.success(res.message)
          // 隐藏对话框
          this.showAddDialog = false
          // 刷新数据
          this.loadData()
        }
      })
    },
    async loadData() {
      const res = await getPermissionList()
      // 经过观察，1级节点的pid就是'0'
      this.tableData = arrayToTree(res.data, '0')
      // this.tableData = res.data
    }
  }
}
</script>

<style>
</style>
